<template>
	<ul :id="getId(info)" class="c_page" v-bind:style="{ display: (isShowPreBtn ||isShowNextBtn)? 'flex':'none'}">
		<li v-if="isShowPreBtn"><button v-on:click="btnHandler(-1)">上一页</button></li>
		<li v-if="isShowNextBtn" v-bind:class="[isShowNextBtn ? 'preHaveCell':'']">
			<button v-on:click="btnHandler(-2)">下一页</button>
		</li>
	</ul>
</template>

<script>
	import SLMUtil from "../../js/SLMUtil.js"
	export default {
		props: ['info'],
		data() {
			return {
				counter: 0,
				paginationVo:{},
				isShowPreBtn:false,
				isShowNextBtn:false,
				}
		},
		mounted() {
			console.log("-------mounted:"+JSON.stringify(this.paginationVo));
		},
		methods: {
			getId:function(paginationVo) {
				//console.log("拿到数据this.paginationVo:"+JSON.stringify(this.paginationVo))
				//console.log("拿到数据paginationVo:"+JSON.stringify(paginationVo))
				//console.log("比较结果:"+SLMUtil.compare(this.paginationVo,paginationVo))
				if(!SLMUtil.compare(this.paginationVo,paginationVo)) {
					this.paginationVo = paginationVo;
				}
				//数据改没改变都得更新UI 因为数据改变不会触发mounted
				this.updateUI();
				
				return "pageDefaultId"
			},
			updateUI:function() {
				console.log("更新UI=====")
				if(this.paginationVo.pageNo > 1 && this.paginationVo.pageSize > 0) {
					this.isShowPreBtn = true
				}else {
					this.isShowPreBtn = false
				}
				let nowShowCount = this.paginationVo.pageNo * this.paginationVo.pageSize
				console.log("nowShowCount:"+nowShowCount)
				if(nowShowCount < this.paginationVo.totalCount) {
					this.isShowNextBtn = true
				}else {
					this.isShowNextBtn = false
				}
				console.log("isShowPreBtn:"+this.isShowPreBtn)
				console.log("isShowNextBtn:"+this.isShowNextBtn)
				
				//父frame刷新高度
				this.$nextTick(() => {
					console.log("DOM 更新了,让父frame刷新高度+++++++");
					//注意!!!父组件必须引入SLMComm.js 且父frame实现refreshIframesHeight,详细参考author.html和managerProduct.html页面的写法
					try {
						// if(parent) {
						// 	parent.refreshIframesHeight();
						// }
					}catch(error){console.log(error)}
				})
			},
			btnHandler: function(index) {
				console.log('index:' + index)
				// 触发事件
				this.$emit('btnsclick', index)
			
			}
		}
	}
</script>

<style>
	/* ***************翻页*************** */
	@media (min-width: 1200px) {/*宽度大于1200px*/
		
	
	}
	
	@media (max-width: 1200px) {/*宽度小于1200px*/
		.c_page li {
			flex: 1;
		}
	}
	.c_page {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		/* border-top: 1px solid #cdcdcd; */
		/* padding-top: 10px; */
	}
	
	.c_page li {
		/* margin-top: 10px; */
		
	}
	/* 下一页前面有上一页则设置间距 */
	.c_page li.preHaveCell {
		margin-left: 10px;
	}
	
	.c_page li button {
		padding: 5px 10px;
		background-color: #f8914d;
		color: white;
		width: 100%;
	}
</style>
